<template>
	<view>
		<view class="title">
			<view class="search">
				<view class="input">
					<input type="text" placeholder="搜一搜" v-model="params.name" />
					<i class="iconfont" style="margin-left: 60rpx;" @click="search">&#xe60a</i>
				</view>
			</view>
			<view class="tab" v-if="isShow===true">
				<view class="tabs">
					<view v-for="(item, index) in tablist" :key="index" class="tabs-1"
						:class="{ 'active': isSelected === item.id }" @click="selectTab(item.id)">
						{{ item.name }}
					</view>
				</view>
				<view class="more">
					<image src="https://pw.qyang.cc/static/set.png" mode="scaleToFill" @click="showfilter = true"/>
				</view>
			</view>
			<view class="content" v-if="activityList.length > 0">
				<view class="activityList" v-for="(item, index) in activityList" :key="index" @click="goDetail(item.id)">
					<view class="title">
						<view class="title-tab" v-if="item.is_recommend == 1">
							推荐
						</view>
						<view class="title-text">
							{{ item.title }}
						</view>
						<view class="stus"
							:class="{'preparing': item.activity_status == '1', 'enrolling': item.activity_status == '2', 'ended': item.activity_status == '3'||item.activity_status=='-1'}">
							{{ item.activity_status==1?'筹备中':item.activity_status==2?'报名中':item.activity_status==3?'已结束':item.activity_status==-1?'已取消':'' }}
						</view>
					</view>
					<view class="image">
						<image :src="rq.imgUrl(item.image)" mode="aspectFill"></image>
						<view class="endtimes" v-if="(item.activity_status == 1||item.activity_status == 2)&&item.exam_status == 2">
							剩余显示时长:{{item.diffindays}}天
						</view>
					</view>
					<view class="con">
						<view class="con1">
							<image src="https://pw.qyang.cc/static/svg/biao.svg" mode="aspectFill"
								style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"></image>
							{{ item.issue }}
						</view>
						<view class="con1">
							<image src="https://pw.qyang.cc/static/svg/dingwei.svg" mode="aspectFit"
								style="width: 30rpx;height: 30rpx;margin-right: 15rpx;"></image>{{ item.address }}
						</view>
						<view class="con1 con2" v-if="(item.activity_status == 1||item.activity_status == 2)&&item.exam_status==2">
							<view class="con2-img">
								<image v-for="i,a in item.join_avatar" :key="a" :src="rq.imgUrl(i)" mode=""></image>
							</view>
							<view class="con2-text">
								累计 <span style="color: #FF7883;">{{ item.join_num }}人</span> 报名
							</view>
						</view>
						<view class="bots">
							<view class="status">
								<view class="status status1" :class="item.operate?'underline':''" v-if="item.exam_status == 2" @click.stop="showPop(item)">
									<view class="dot"></view>
									通过
								</view>
								<view class="status status2" :class="item.operate?'underline':''" v-if="item.exam_status == 1" @click.stop="showPop(item)">
									<view class="dot"></view>
									待审
								</view>
								<view class="status status3" :class="item.operate?'underline':''" v-if="item.exam_status == 3" @click.stop="showPop(item)">
									<view class="dot"></view>
									驳回
								</view>
							</view>
							<view class="management">
								<view class="buts">
									<view class="but" v-if="item.exam_status == 2"
										style="background: #F7F7F7;color: #333333;" @click.stop="jump('/subpages/registered-activities/group-ewm/group-ewm?id='+item.id)">群二维码</view>
									<view class="but" v-if="item.exam_status == 2"
										style="background: #F7F7F7;color: #333333;" @click.stop="pay(item.id)">显示续费</view>
									<view class="but"
										v-if="item.exam_status == 2 && item.activity_status == '1'||  item.activity_status == '2'"
										style="background: #FF5866;color: #ffffff;" @click.stop="pickerOpen(item.id)">变更状态</view>
									<view class="but" v-if="item.exam_status == 1"
										style="background: #FF5866;color: #ffffff;" @click.stop="revoke(item.id,index)">
										撤销审核</view>
									<view class="but" v-if="item.activity_status == '-1'||item.exam_status == 3"
										style="background: #F7F7F7;color: #333333;" @click.stop="del(item.id)">删除活动</view>
									<view class="but" v-if="item.activity_status == '-1'||item.exam_status == 3"
										style="background: #FF5866;color: #ffffff;" @click.stop="reSumbit(item.id)">重新提交</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show = false" mode="center" @open="show = true" round="20">
			<view class="popup_view">
				<view class="pop_title">操作说明</view>
				<view class="pop_content">
					{{reason}}
				</view>
				<view class="pop_btn" @click="show = false">知道了</view>
			</view>
		</u-popup>
		<u-popup :show="showTip" mode="center" @close="showTip=false" @open="showTip=true" closeable="true"
			round="10">
			<view class="pop-bg">
				提示
				<view class="text">
					确认删除此活动？
				</view>
				<view class="btn">
					<view class="confirm" @click="showTip=false">我再想想</view>
					<view class="cancel" @click="confirmTip">确认删除</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="showPicker" :columns="columns" keyName="label" @cancel="showPicker = false" @confirm="pickerConfirm"></u-picker>
		<!-- 筛选 -->
		<u-popup :show="showfilter" :round="10" mode="bottom" closeable @close="showfilter=false"
			@open="showfilter=true">
			<view class="pop-content">
				<view class="title">
					筛选项
				</view>
				<view class="title-1">
					活动名称
					<input class="input" type="text" placeholder="请输入" v-model="params.name"/>
				</view>
		
				<view class="title-1">
					活动时间
					<view class="time" style="display: flex;justify-content: space-between;">
						<view class="time1" style="margin-right: 10rpx;" @click="showTime1=true">
							<view v-if="!start_time">
								开始日期
							</view>
							<view v-else>
								{{formatDate(start_time)}}
							</view>
						</view>
						<view class="time1" style="margin-left: 10rpx;" @click="showTime2=true">
							<view v-if="!end_time">
								结束日期
							</view>
							<view v-else>
								{{formatDate(end_time)}}
							</view>
						</view>
					</view>
				</view>
				<view class="title-1">
					活动状态
					<view class="status" style="display: flex;justify-content: space-around;margin: 0 -10px;">
						<view class="status-item" v-for="(i,index) in columns[0]" :key="index"
							:class="{ 'active': isSelected1 === index }" @click="selectTab1(index)">
							{{i.label}}
						</view>
					</view>
				</view>
				<view class="pop-bottom">
					<view class="btn1" @click="reset">
						重置
					</view>
					<view class="btn2" @click="confirmfilter">
						确认
					</view>
				</view>
			</view>
		</u-popup>
		<u-datetime-picker :show="showTime1" v-model="value1" mode="date"
			@confirm="choosetime1" @cancel="showTime1 = false"></u-datetime-picker>
		<u-datetime-picker :show="showTime2" v-model="value1" mode="date"
			@confirm="choosetime2" @cancel="showTime2 = false"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPicker:false,
				tablist: [{
					id:0,
						name: "全部",
					},
					{
						id:2,
						name: "通过",
					},
					{
						id:1,
						name: "待审",
					},
					{
						id:3,
						name: "驳回",
					},
				],
				searchContent: '',
				activityList: [],
				columns: [
					[{
						id:1,
						label:'筹备中'
					},{
						id:2,
						label:'进行中'
					},{
						id:3,
						label:'已结束'
					}]
				],
				isSelected: 0,
				isShow: true,
				showTip: false,
				params: {
					page: 1
				},
				total: 0,
				show:false,
				reason: '',
				currentId:null,
				showfilter:false,
				showTime1:false,
				showTime2:false,
				start_time:'',
				end_time:'',
				isSelected1:null,
				value1: Number(new Date()),
			};
		},
		onReachBottom() {
			if (this.activityList.length > this.total) {
				this.params.page++
				this.getList(true)
			}
		},
		onPullDownRefresh() {
			this.params.page = 1
			this.getList()
			uni.hideNavigationBarLoading();
		},
		onShow() {
			this.params.page = 1
			this.getList()
		},
		methods: {
			getList(more) {
				this.rq.getData('User_Activity/activity_manage', this.params).then(res => {
					if (more) {
						this.activityList = [...this.activityList, ...res.data.data]
					} else {
						this.activityList = res.data.data
					}
					this.total = res.data.total
					uni.stopPullDownRefresh();
				}).catch(err => {
					uni.stopPullDownRefresh();
				})
			},
			pickerOpen(id){
				this.currentId = id
				this.showPicker = true
			},
			pickerConfirm(e){
				this.rq.getData('Activity/update_activity_status',{id:this.currentId,activity_status:e.value[0].id}).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title:'变更成功~'
						})
						this.showPicker = false
						this.params.page = 1
						this.getList()
					}
				})
			},
			pay(id){
				let params = {id:id}
				uni.navigateTo({
					url:`/subpages/launch/pay?id=${id}&type=1`
				})
			},
			search() {
				this.params.page = 1
				this.getList()
			},
			showPop(item) {
				if(item.operate){
					this.reason = item.operate
					this.show = true
				}
			},
			selectTab1(index) {
				this.isSelected1 = index
			},
			choosetime1(e) {
				this.start_time = e.value
				this.showTime1 = false
			},
			choosetime2(e) {
				this.end_time = e.value
				this.showTime2 = false
			},
			reSumbit(id){
				uni.navigateTo({
					url:'/subpages/launch/launch?id='+id
				})
			},
			revoke(id, index) {
				this.rq.getData('User_Activity/revoke_exam', {
					id
				}).then(res => {
					this.params.page = 1
					this.getList()
				})
			},
			confirmfilter(){
				this.params.page = 1
				this.params.starttime = this.start_time?this.formatDate(this.start_time):''
				this.params.endtime = this.end_time?this.formatDate(this.end_time):''
				this.params.activity_status = this.isSelected1===null?'':this.columns[0][this.isSelected1].id
				this.getList()
				this.showfilter = false
			},
			reset(){
				this.params = {
					page:1
				}
				this.getList()
				this.showfilter = false
			},
			selectTab(id) {
				this.isSelected = id;
				this.params.exam_status = id
				this.params.page = 1
				this.getList()
				// this.filterActivities();
			},
			del(id){
				this.currentId = id
				this.showTip = true
			},
			confirmTip(){
				this.rq.getData('User_Activity/delete',{id:this.currentId}).then(res=>{
					if(res.code === 1){
						uni.showToast({
							title:'删除成功~',
							icon:'none'
						})
						this.showTip = false
						this.params.page = 1
						this.getList()
					}
				})
			},
			jump(url) {
				uni.navigateTo({
					url: url,
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/subpages/activity/detail?id=" + id,
				});
			},
			goPage(url) {
				// 发起活动
				uni.navigateTo({
					url: `/subpages/${url}`,
				});
			},
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
			
				return `${year}-${month}-${day}`;
			},
		}
	};
</script>

<style lang="scss">
	.title {
		background-color: #ffffff;
	}
	.pop-bg {
		width: 606rpx;
		height: 303rpx;
		border-radius: 8px;
		opacity: 1;
		background: #FFFFFF;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: normal;
		line-height: 14px;
		letter-spacing: 0px;
		color: #333333;
		padding: 40rpx;
		padding-bottom:0;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		text-align: center;
		
		.text {
			margin: 50rpx 0 0;
		}
	
		.btn {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: auto;
			width: 100%;
	
			.cancel {
				width: 98px;
				height: 34px;
				border-radius: 102px;
				opacity: 1;
	
				background: #F7F7F7;
	
				border: 1px solid #F7F7F7;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
			}
	
			.confirm {
				width: 98px;
				height: 34px;
				border-radius: 102px;
				opacity: 1;
	
				background: #FF5866;
	
				border: 1px solid #FF5866;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
	.popup_view{
		width: 606rpx;
		height: 584rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		// justify-content: space-around;
		align-items: center;
		
		.pop_title{
			font-size: 32rpx;
			color: #212121;
			margin-top: 28rpx;
			margin-bottom: 50rpx;
		}
		.pop_content{
			box-sizing: border-box;
			padding:0 34rpx;
			line-height: 70rpx;
			font-size: 28rpx;
			width: 100%;
		}
		.pop_btn{
			background: #FF5866;
			width: 214rpx;
			height: 74rpx;
			border-radius: 204rpx;
			color: #FFFFFF;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: auto;
			margin-bottom:68rpx;
		}
	}
	
	.tab {
		position: relative;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.more {
			image {
				width: 25rpx;
				height: 25rpx;
				margin-right: 40rpx;
			}
		}

		.tabs {
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			height: 60rpx;
			width: 70%;

			.tabs-1 {
				flex: 1;
				justify-content: center;
				align-items: center;
				display: flex;

				font-size: 14px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;

				color: #999999;
			}

			.tabs-1.active {
				position: relative;
				font-size: 15px;
				font-weight: 600;
				line-height: 15px;
				letter-spacing: 0px;
				transition: all 0.3s ease;
				color: #333333;
			}

			.tabs-1.active::after {
				border-radius: 3px;
				opacity: 1;
				background: #ff7883;
				content: "";
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 55rpx;
				height: 3px;
				transition: width 0.3s ease, opacity 0.3s ease;
			}
		}
	}

	.content {
		padding: 20rpx 30rpx 100rpx 30rpx;
		position: relative;
		background-color: #f4f4f4;

		.activityList {
			margin-bottom: 30rpx;
			border-radius: 10px;
			background-color: #ffffff;
			width: 100%;
			// height: 686rpx;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			position: relative;

			.title {
				font-size: 14px;
				font-weight: 600;
				line-height: 2px;
				letter-spacing: 0px;
				color: #333333;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				// // width: 600rpx;
				// padding: 30rpx;
				// position: relative;
				// margin: 10rpx 0;
				padding: 10rpx 28rpx;
				// position: relative;
				margin: 10rpx 0;
				width: 100%;
				display: flex;
				align-items: center;
				box-sizing: border-box;

				.title-text {
					width: 450rpx;
					height: 40rpx;
					line-height: 40rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.title-tab {
					width: 50px;
					height: 40rpx;
					border-radius: 4px;
					opacity: 1;

					background: #ff7681;
					font-size: 12px;
					font-weight: normal;
					line-height: 12px;
					text-align: center;
					letter-spacing: 0px;
					color: #ffffff;
					margin-right: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.stus {
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					color: #ffffff;
					width: 110rpx;
					height: 50rpx;
					line-height: 50rpx;
					border-radius: 0rpx 16rpx 0rpx 16rpx;
					text-align: center;
					font-size: 26rpx;
					background: #84e28c;

					/* 默认背景色 */
					&.preparing {
						background: #ae9cfe;
					}

					&.enrolling {
						background: #84e28c;
					}

					&.ended {
						background: #f5f5f5;
						color: #999999;
					}
				}
			}

			.image {
				width: 100%;
				height: 400rpx;
				position: relative;

				image {
					width: 100%;
					height: 400rpx;
				}

				.endtimes {
					color: #ffffff;
					background-color: #ff7681;
					padding: 15rpx 80rpx;
					border-radius: 50rpx;
					font-size: 28rpx;
					position: absolute;
					left: 150rpx;
					bottom: -16px;
					opacity: 1;
				}
			}

			.bots {
				padding: 0 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 2rpx solid #F0EFEF;
				padding-top: 26rpx;

				.status {
					font-size: 28rpx;
					
					&.underline{
						text-decoration: underline;
					}

					.status1 {
						color: #84e28c;

						.dot {
							width: 8px;
							height: 8px;
							background-color: #84e28c;
							border-radius: 50%;
							display: inline-block;
							margin-right: 5px;
						}
					}

					.status2 {
						color: #ae9cfe;

						.dot {
							width: 8px;
							height: 8px;
							background-color: #ae9cfe;
							border-radius: 50%;
							display: inline-block;
							margin-right: 5px;
						}
					}

					.status3 {
						color: #ff7681;

						.dot {
							width: 8px;
							height: 8px;
							background-color: #ff7681;
							border-radius: 50%;
							display: inline-block;
							margin-right: 5px;
						}
					}
				}

				.management {
					.buts {
						display: flex;
						align-items: center;						
						.but {
							width: 150rpx;
							height: 48rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							border-radius: 25rpx;
							font-size: 24rpx;
							margin-left: 18rpx;
						}
					}
				}
			}

			.btn {
				right: 35%;
				position: absolute;
				width: 115px;
				height: 38px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 99px;
				opacity: 1;
				margin-top: 445rpx;
				background: #ff7681;
				font-family: PingFang SC;
				font-size: 18px;
				font-weight: normal;
				line-height: 18px;
				letter-spacing: 0px;
				color: #ffffff;
				text-shadow: 0px 1px 4px rgba(108, 37, 37, 0.25);
			}

			.con {
				width: 100%;
				padding: 20rpx 0;

				.con1 {
					font-family: 阿里巴巴普惠体 2;
					font-size: 13px;
					font-weight: normal;
					line-height: 12px;
					letter-spacing: 0px;
					margin: 20rpx;
					color: #333333;
					display: flex;
					align-items: center;
				}

				.con2 {
					display: flex;

					.con2-img {
						width: 460rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;

						image {
							width: 21px;
							height: 21px;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}

					.con2-text {
						font-family: PingFang SC;
						font-size: 14px;
						font-weight: normal;
						line-height: 12px;
						letter-spacing: 0px;

						font-variation-settings: "opsz" auto;
						/* 累计 */
						color: #000000;
					}
				}
			}
		}
	}

	.search {
		width: 92%;
		height: 35px;
		border-radius: 99px;
		opacity: 1;

		background: #fcf9f9;

		box-sizing: border-box;
		border: 1px solid #333333;
		margin: 0 auto 20rpx;
		display: flex;
		align-items: center;

		.input {
			display: flex;
			align-items: center;
			// justify-content: center;
			width: 100%;

			input {
				padding-left: 30rpx;
				font-family: 阿里巴巴普惠体 2;
				font-size: 13px;
				font-weight: normal;
				line-height: 13px;
				letter-spacing: 0px;
				color: #999999;
				width: 80%;
			}
		}
	}
	.pop-content {
		width: 100%;
		min-height: 510rpx;
		padding-top: 36rpx;
		font-family: PingFang SC;
		font-size: 15px;
		font-weight: normal;
		line-height: 15px;
		letter-spacing: 0px;
		color: #333333;
	
		.con {
			margin: 20rpx 30rpx;
		}
	
		.con1 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 40rpx 0;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			color: #333333;
	
			.con1-2 {
				margin-right: 20rpx;
				display: flex;
				align-items: center;
			}
	
			image {
				width: 16px;
				height: 16px;
				margin-right: 20rpx;
			}
		}
	
		.con2 {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			margin: 40rpx 10rpx;
			color: #333333;
	
			.input {
				width: 81.19%;
				height: 34px;
				border-radius: 8px;
				opacity: 1;
	
				background: #F6F6F6;
	
			}
		}
	
		.con3 {
			font-family: PingFang SC;
			font-size: 14px;
			font-weight: normal;
			line-height: 15px;
			letter-spacing: 0px;
			margin: 40rpx 10rpx;
			color: #333333;
	
			.con3-text {
				font-family: PingFang SC;
				font-size: 14px;
				font-weight: normal;
				line-height: 15px;
				letter-spacing: 0px;
				color: #FF7681;
			}
	
			.con3-input {
				margin-top: 20rpx;
			}
	
			.con3-photo {
				margin-top: 20rpx;
	
				.btn {
					width: 160rpx;
					height: 160rpx;
					border-radius: 8px;
					opacity: 1;
					background: #F7F7F7;
					box-sizing: border-box;
					border: 0.5px solid #C4C4C4;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					font-size: 10px;
					font-weight: normal;
					line-height: 14px;
					letter-spacing: 0px;
	
					color: #B8B8B8;
	
					image {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 20rpx;
					}
				}
			}
		}
	
		.title {
			text-align: center;
		}
	
		.title-1 {
			margin: 10rpx 30rpx;
	
			.input {
				// width: 89.07%;
				height: 34px;
				border-radius: 8px;
				opacity: 1;
				background: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: start;
				line-height: 34px;
				padding: 0 20rpx;
				margin: 20rpx 0;
			}
	
			.status {
				display: flex;
				flex-wrap: wrap;
				margin: 20rpx 0;
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;
	
				color: #999999;
	
				.status-item {
					width: 100px;
					height: 40px;
					border-radius: 8px;
					opacity: 1;
					background: #F6F6F6;
					margin: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
	
				.status-item.active {
					background: #ff5866;
					color: #fff;
				}
	
			}
	
			.time {
				font-family: PingFang SC;
				font-size: 13px;
				font-weight: normal;
				line-height: 15px;
				text-align: center;
				letter-spacing: 0px;
				color: #999999;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 20rpx 0;
	
				.time1 {
					// width: 145px;
					flex: 1;
					height: 40px;
					border-radius: 8px;
					opacity: 1;
					background: #F6F6F6;
					font-family: PingFang SC;
					font-size: 13px;
					font-weight: normal;
					line-height: 15px;
					text-align: center;
					letter-spacing: 0px;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: center;
					// margin: 0 30rpx;
				}
			}
		}
	
		.pop-bottom {
			// position: absolute;
			bottom: 0;
			display: flex;
			align-items: center;
			font-family: PingFang SC;
			font-size: 15px;
			font-weight: normal;
			line-height: 15px;
			text-align: center;
			letter-spacing: 0px;
			height: 60px;
			width: 100%;
			justify-content: center;
			background: #FFFFFF;
			box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
	
			.btn1 {
				width: 133px;
				height: 37px;
				border-radius: 102px;
				opacity: 1;
				background: #F7F7F7;
				border: 1px solid #F7F7F7;
				color: #333333;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 80rpx;
			}
	
			.btn2 {
				color: #ffffff;
				width: 133px;
				height: 37px;
				border-radius: 102px;
				opacity: 1;
				background: #FF5866;
				border: 1px solid #FF5866;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>